<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.4.1.min.js"></script>
</head>
<body>
    <form action="">
        <table>
            <tr>
                <td>
                    <select style="width:200px" size="10" id="left">
                        <option>web前端</option>
                        <option>java大数据</option>
                        <option>jquery</option>
                    </select>
                </td>
                <td>
                    <input type="button" value=">>" id="in1">
                    <input type="button" value="==>>" id="in2"><br>
                    <input type="button" value="<<" id="in3">
                    <input type="button" value="<<==" id="in4">
                </td>
                <td>
                    <select style="width:200px" size="10" id="right">
                        <option>HTML+css</option>
                    </select>
                </td>
            </tr>
        </table>
    </form>
    内容：<input type="text" id="add"><input type="button" value="提交" id="addd">
</body>
<script>
    //点击提交按钮，把文本框内容提交到左侧框框里
    $(document).ready(function(){
        $("#addd").click(function(){
            //获取add的value值
            var a=$("#add").val();
            //将a放到left里
            $("#left").append("<option>"+a+"</option>");
            //提交完成后输入框清空
            $("#add").val("")
        })
        
        $("#in1").click(function(){
            $("#right").append($("#left option:selected"))
        })
        $("#in2").click(function(){
            $("#right").append($("#left option"))
        })
        $("#in3").click(function(){
            $("#left").append($("#right option:selected"))
        })
        $("#in4").click(function(){
            $("#left").append($("#right option"))
        })
    })
</script>
</html>